//加载公共样式
require('../../assets/css/common.less')
//加载自己的样式
require('./userDails.less')
//引入tabbar渲染函数
const request = require('../../utils/request')
window.onload = () => {
  let avater = document.querySelector('#avater')
  let upload = document.querySelector('#upload')
  const showSexPicker = document.querySelector('#showSexPicker')
  const selSex = document.querySelector('#selSex')
  let API = 'http://fitness.h5.itsource.cn:3701'
  let sextxt = document.querySelector('.sextxt')
  let weuiBtn = document.querySelector('.weui-btn')
  const showDatePicker = document.querySelector('#showDatePicker')
  let selBirthday = document.querySelector('#selBirthday')
  const showProvincePicker = document.querySelector('#showProvincePicker')
  let provinceId1 = ''
  const selProvince = document.querySelector('#selProvince')
  let provinces = [] //储存省份
  let nickName = document.querySelector('#nickName')



  //获取用户信息
  function getUserInfo() {
    request.get('/api/user/info').then(res => {
      //1 解构数据
      let { errno, data } = res.data
      // console.log(res.data);
      //2 判断
      if (errno === 0) {
        //3 处理业务逻辑
        console.log(data);
        render(data)
      }
    })
  }

  //渲染数据

  function render(data) {
    //图片渲染 服务器地址+相对路径+文件名
    avater.src = API + data.imgUrl;
    nickName.value = data.nickName;
    selSex.textContent = a===1?'男':'女' //空值合并 //空值合并
    selBirthday.textContent = data.birthday ?? '请选择生日' //空值合并
    text.value = data.sign

  }
  //初始化获取用户信息
  getUserInfo()

  //监听file 输入框的change事件
  upload.addEventListener('change', e => {
    // console.log('e :>> ', e.target.files[0])
    //创建FormData 对象 添加文件
    const formData = new FormData()
    formData.append('file', e.target.files[0])
    //发送ajax请求
    request.post('/api/shared/uploadPortrait', formData).then(res => {
      //解构数据
      let {errno, data} = res.data
      //判断
      if (errno === 0) {
        avater.src = API + data.url
      }
    })
  })


  //性别
  let a
  showSexPicker.addEventListener('click', () => {
    weui.picker(
      [
        {
          label: '男',
          value: 0,
        },
        {
          label: '女',
          value: 1,
        },
      ],
      {
        //确定才选中
      
        onConfirm: function (result) {
          selSex.textContent = result[0].label
          a=selSex.textContent==='男'?1:0
          console.log(a);
        },
        title: '性别选择',
      }
    )
  })

  //生日选择器

  showDatePicker.addEventListener('click', () => {
    weui.datePicker({
      start: 1990,
      end: new Date().getFullYear(),

      onConfirm: function (result) {
        console.log(result)
        selBirthday.textContent = result.map(v => String(v.value).padStart(2, '0')).join('-')
      },
      title: '多列选择器',
    })

  })

  //监听下拉点击
  showDatePicker.addEventListener('click', () => {


  })
  //省份选择

  function getProvinces() {
    request.get('/api/shared/province').then(res => {
      //解构数据
      let { errno, data } = res.data
      // console.log(data);
      //判断
      if (errno === 0) {
        //处理数据
        provinces = data.map(v => {
          return {
            label: v.name,
            value: v.id,
          }
        })
      }
      // console.log(provinces);
    })
  }
  getProvinces()
  //省份选择器

  showProvincePicker.addEventListener('click', () => {
    weui.picker(provinces, {
      //确定才选中
      onConfirm: function (result) {
        //  console.log(result)
        selProvince.textContent = result[0].label
        //  console.log(result[0].value);
        provinceId1 = result[0].value
        getCity(result[0].value)
      },
      title: '省份选择',
    })
  })
  //获取城市
  let selCity = document.querySelector('#selCity')
  let cityId = ''
  let pickerOldHandler = null //用于储存上一次的 弹窗函数
  function getCity(provinceId) {
    request.get('/api/shared/city', {
      params: {
        provinceId
      },
    })
      .then(res => {
        let { errno, data } = res.data
        // console.log(data);
        if (errno === 0) {
          let citys = data.map(v => ({
            label: v.name, value: v.id
          }))

          function handler() {
            weui.picker(citys, {
              //确定才选中
              onConfirm: function (result) {
                console.log(result)
                selCity.textContent = result[0].label
                cityId = result[0].value
              },
              title: '城市选择',
            })
          }


          //获取数据之后 再绑定选择器 渲染内容
          showCityPicker.removeEventListener('click', pickerOldHandler)
          //把这一次的弹窗函数 赋值给外层变量.使得pickerOldHandler进入闭包存储起来
          pickerOldHandler = handler
          //获取数据之后 再绑定选择器 渲染内容
          showCityPicker.addEventListener('click', handler)


        }
      })
  }

  //文本域监听
  let text = document.querySelector('#text')
  let textLength = document.querySelector('#textLength')

  text.addEventListener('input', () => {
    textLength.textContent = text.value.length
  })

  //提交表单
  let submit = document.querySelector('#submit')
  //提交表单
  submit.addEventListener('click', () => {
    request
      .post('/api/user/changeInfo', {
        nickName: nickName.value,
        gender: a,
        provinceId: provinceId1,
        cityId: cityId,
        birthday: selBirthday.textContent,
        imgUrl: avater.src.replace(API, ''),
        sign: text.value,
      })
      .then(res => {
        // console.log('res.data :>> ', res.data)
        //解构数据
        let { errno, data } = res.data
        //判断
        if (errno === 0) {
          //更新token
          localStorage.setItem('token', 'Bearer ' + data.token)
          getUserInfo()
        }
      })
  })


}
